<template>
<div class="image_layout">
<el-upload
   ref="upload"
  :accept="this.acceptFileType(fileType)"
  :limit="limit"
  :class="isDisabledUplaod"
  :multiple="multiple"
  :action="action"
  :list-type='listType'
  :file-list="fileList"
  :headers="headerInfos"
  :on-change="handleChange"
  :on-progress="handleProgress"
  :on-preview="handlePictureCardPreview"
  :before-upload="handlebeforeUpload"
  :on-success="handleSuccess"
  :on-remove="handleRemove">
   <!-- <el-icon class="el-icon-upload"></el-icon> -->
  <i slot="default" class="el-icon-plus"></i>
  <div slot="tip" class="el-upload__tip">{{uploadTip}}</div>
</el-upload>
<!-- <el-dialog append-to-body :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> -->
 <Enlarge-image ref="enlargeImage"/>
</div>
</template>

<script>
import EnlargeImage from '@/components/EnlargeImage'
import {X_ACCESS_TOKEN, X_ACCESS_APP_ID} from '@/config/sysconsts'
import {
  getAuthToken
} from '@/utils/auth'
export default {
  props: {
    files: {type: Array,
      default: () => {
        return []
      }},
    multiple: {type: Boolean,
      default: () => {
        return false
      }},
    limit: {
      type: Number,
      default: () => {
        return 2
      }
    },
    uploadTip: {String, default: '只能上传jpg/png文件，且不超过2MB'},
    listType: {String, default: 'picture-card'},
    fileType: {type: String, default: 'img'}
  },
  components: {EnlargeImage},
  computed: {
    action: {
      get () {
        return process.env.BASE_API + '/file/upload/single'
      }
    }
  },
  data () {
    return {
      headerInfos: {[X_ACCESS_APP_ID]: process.env.APP_ID, [X_ACCESS_TOKEN]: getAuthToken()},
      isDisabledUplaod: this.files && this.files.length >= this.limit ? 'disabled' : 'NON',
      fileList: this.files
    }
  },
  methods: {
    handleRemove (file, fileList) {
      this.isDisabledUplaod = 'NON'
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    handlePictureCardPreview (file) {
      this.showPic(file.name, file.url)
    },
    handleChange (file, fileList) {

    },
    handlebeforeUpload (file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isJPG) {
      //   this.$message.error('上传图片只能是 JPG或PNG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传大小不能超过 2MB!')
      }
      return isLt2M
    },
    handleProgress (event, file, fileList) {
    },
    handleSuccess (response, file, fileList) {
      // console.log('handleSuccess', response)
      if (response.code === 0) {
        this.fileList.push({name: response.data.fileName, url: response.data.url})
        if (fileList.length >= this.limit) {
          this.isDisabledUplaod = 'disabled'
        }
      } else {
        this.handleRemove(file, fileList)
        this.$message.error(response.message)
      }
    },
    acceptFileType (e) {
      const allowHook = {
        video: '.mp4, .ogv, .ogg, .webm',
        audio: '.wav, .mp3, .ogg, .acc, .webm, .amr',
        file: 'doc,.docx,.xlsx,.xls,.pdf',
        excel: 'xlsx,.xls',
        img: '.png, .jpg'
      }
      if (e) {
        return allowHook[e]
      }
      let srt = null
      for (const k in allowHook) {
        srt += allowHook[k]
      }
      return srt
    },
    showPic (name, url) {
      this.$refs.enlargeImage.show(url, name)
    }
  }
}
</script>
<style lang="scss" scoped>
.image_layout{
    width: 100%;
}
.disabled >>>.el-upload--picture-card{
    display: none
}
</style>
